[코담]
웹개발·실전 프로젝트·AI까지, 파이썬·장고의 모든것을 담아낸 강의와 개발 노트
Part6 | ✅저자: 이유정(박사)
🔹 Django 튜토리얼 Part6 – 정적파일 (static files)
📖 공식 문서 링크:
🔗 https://docs.djangoproject.com/ko/stable/intro/tutorial06/
목표
-
정적 파일의 개념 이해
- CSS, JavaScript, 이미지와 같은 파일을 Django에서는 "정적 파일(static files)"이라 부름.
-
앱 디렉토리에 정적 파일 저장
polls/static/polls/경로에 스타일시트(style.css) 및 이미지(background.png) 저장.
-
템플릿에서 정적 파일 사용
{% load static %}태그로 템플릿 상단에 로딩.{% static '경로/파일명' %}으로 정적 파일의 경로를 지정.
-
CSS를 이용한 텍스트 스타일링과 배경 이미지 설정
- 링크 색상 변경 (
li a { color: green; }) - 배경 이미지 추가 (
body { background: url(...) })
- 링크 색상 변경 (
-
정적 파일 네임스페이싱의 필요성 이해
- 앱 이름과 같은 하위 디렉토리를 만들어 충돌을 방지.
📂 디렉토리 구조 변경:
polls/
├── __pycache__/
├── migrations/
├── static/
│ └── polls/
│ ├── css/
│ │ ├── detail.css
│ │ ├── results.css
│ │ └── styles.css
│ ├── images/
│ │ └── background.jpg #이미지 넣기
│ └── js/
├── templates/
│ └── polls/
│ ├── base.html
│ ├── detail.html
│ ├── footer.html
│ ├── head.html
│ ├── header.html
│ ├── index.html
│ └── results.html
├── __init__.py
├── admin.py
├── apps.py
├── models.py
├── tests.py
├── tests_selenium.py
├── urls.py
└── views.py
✅ settings.py
STATICFILES_DIRS = [
BASE_DIR / "static",
]
TEMPLATES = [
"DIRS": [BASE_DIR / "templates"],
]
✅ base.html에서 head.html로 분리
{% load static %}
<!DOCTYPE html>
<html lang="ko">
{% include "polls/head.html" %} ==<!--head분리-->==
<body>
{% include "polls/header.html" %}
<main>
{% block content %}
{% endblock %}
</main>
{% include "polls/footer.html" %}
</body>
</html>
✅ detail 및 다른 컨텐츠에 아래 코드 삭제
<link rel="stylesheet" href="{% static 'polls/css/index.css' %}" />
head.html에 넣었으므로 모두 적용됩니다.
CSS 경로수정
{% load static %}
<head>
<meta charset="UTF-8" />
<title>{% block title %}Polls{% endblock %}</title>
<link rel="stylesheet" href="{% static 'polls/css/index.css' %}" />
<link rel="stylesheet" href="{% static 'polls/css/detail.css' %}" />
</head>
✅ (styles.css 또는 공통 레이아웃에 연결된 CSS 파일)
body {
background: url("../images/background.png") no-repeat top left;
background-size: cover;
}
경로는 상대경로입니다. {% static %}를 사용하지 않습니다.
✅ WSL 터미널에서 아래 명령어 입력: 이미지를 넣기 위해 본인경로찾기
explorer.exe .
무료 이미지 site Freepik
✅ index.html에 별이미지 삽입하기
<div class="header">
<img src="{% static 'polls/images/icon.png' %}" alt="아이콘" class="icon" />
<h2>설문 목록</h2>
<a href="{% url 'polls:question_create' %}" class="btn new-question-btn">새 질문</a>
</div>
✅ `static/polls/css/style.css
/*icon*/
.header {
display: flex;
align-items: center;
justify-content: center;
margin: 30px 0;
gap: 10px;
margin-bottom: 1em;
}
.heading-with-icon .icon {
width: 50px;
height: 50px;
}
Python 코드 실행기
